<template>
    <view>
        <u-navbar title="视频播放" :background="background" back-icon-color="#efefef" title-color="#efefef"></u-navbar>
        <video class="video" id="myVideo" :src="src"
                    @error="videoErrorCallback" controls enable-play-gesture="true">
        </video>
        <view class="list">
            <u-section title="视频列表" :right="false" font-size="40" color="#595959"></u-section>
        </view>
        <u-collapse :item-style="itemStyle">
        		<u-collapse-item :title="item.title" v-for="(item, index) in videoList" :key="index" @change="changeVideo(item.path)">
        			{{item.introduction}}
        		</u-collapse-item>
        </u-collapse>
        <!-- <view class="box">
            视频1
        </view>
        <view class="box">
            视频2
        </view> -->
        <!-- <view @click="video()">换个视频</view> -->
    </view>
</template>

<script>
    import { getVideos } from "../../api/data.js"
    import { FIlE_PATH } from "../../common/index.js"
    export default {
        data() {
            // let that = this;
            return {
                background: {
                    backgroundImage: 'linear-gradient(45deg, rgb(255, 40, 0), rgb(147, 0, 0))'
                    // backgroundColor: "#ffffff"
                },
                src: "http://10.90.27.0:8099/myblog/upload/video/zjcentury1.mp4",
                myfilepath: '',
                videoList:[],
                itemStyle: {
                    padding: '10rpx 30rpx',
                    /* // margin-top: 30rpx; */
                    margin: '5rpx 10rpx',
                    background: '#f3f3f3',
                    border: '3rpx solid #6b6b6b',
                    borderRadius: '20rpx',
                    fontSize: '32rpx',
                }
            }
        },
        onReady: function(res) {
                // #ifndef MP-ALIPAY
                this.videoContext = uni.createVideoContext('myVideo')
                // #endif
            },
            onShow(){
                this.getVideos()
                this.myfilepath=FIlE_PATH
            },
            methods:{
                videoErrorCallback: function(e) {
                            uni.showModal({
                                content: e.target.errMsg,
                                showCancel: false
                            })
                        },
                        video(){
                            this.src="http://localhost:8099/myblog/upload/3.mp4"
                        },
                        getVideos(){
                            const _this=this
                            getVideos().then(function(res){
                                _this.videoList=res.data.data
                            })
                        },
                        changeVideo(path){
                            this.src=this.myfilepath+path
                        }
            }
    }
</script>
<style>
    .video {
        height: 400rpx;
        width: 750rpx;
    }
    .list {
       height: 100rpx;
       padding: 20rpx;
       background-color: #dfdfdf;
       border-bottom: 5rpx solid #9d9d9d;
       margin: 0 auto;
       
    }
    .box {
        padding: 20rpx 30rpx;
        /* // margin-top: 30rpx; */
        margin: 5rpx 10rpx;
        background: #e6e6e6;
        border: 3rpx solid #ddd;
        border-left: none;
        border-right: none;
        border-radius: 20rpx;
        font-size: 32rpx;
    }
</style>
